<template>
  <div class="xzkr">
    <Card title="基础配置">
      <el-form size="small" inline>
        <el-form-item label="分区名称">
          <el-input v-model="valA" placeholder="请输入服务名称"></el-input>
        </el-form-item>
        <el-form-item label="服务名称">
          <el-select placeholder="请选择" v-model="valB">
            <el-option label="hhtb-config" :value="1"> </el-option>
            <el-option label="hhtb-abs-web" :value="2"> </el-option>
            <el-option label="hhtb-abs-server" :value="3"> </el-option>
            <el-option label="hhtb-abs-bpm-send" :value="4"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </Card>
    <Card title="系统配置">
      <el-form size="small" inline>
        <section v-for="item in zbNums" :key="item">
          <el-form-item label="名称">
            <el-input v-model="valC" placeholder="请输入服务名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="zbNums++">
              增加
            </el-button>
            <el-button type="danger" size="mini" @click="zbNums--">
              删除
            </el-button>
          </el-form-item>
          <br />
          <el-form-item label="内容" class="textarea">
            <el-input v-model="valD" type="textarea" rows="4"></el-input>
          </el-form-item>
        </section>
      </el-form>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
export default {
  components: {
    Card
  },

  data() {
    return {
      zbNums: 1,
      valA: '',
      valB: 1,
      valC: '',
      valD: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.textarea {
  /deep/.el-form-item__content {
    width: 800px;
  }
}
</style>
